<template>
	<u-popup
		mode="bottom"
		closeable
		:show="showInvoice"
		@close="closeInvoice">
		<view class="invoice-popup">
			<view class="invoice-popup-title main-flex">发票</view>
			<view class="invoice-popup-content">
				<scroll-view scroll-y class="invoice-popup-form form">
					<uni-forms
						:modelValue="form"
						ref="formRef"
						:label-width="110"
						:rules="rules">
						<view>
							<uni-forms-item label="发票内容" name="invoice" required>
								<uni-data-checkbox
									@change="changeInvoice"
									mode="tag"
									v-model="form.invoice"
									:localdata="invoiceList"
									selectedColor="#e3230e"></uni-data-checkbox>
							</uni-forms-item>
						</view>
						<view v-if="form.invoice === 1">
							<uni-forms-item label="发票类型" name="type" required>
								<uni-data-checkbox mode="tag" v-model="form.type" :localdata="invoiceTypeList" selectedColor="#e3230e"></uni-data-checkbox>
							</uni-forms-item>
						</view>
						<view v-if="form.invoice === 1">
							<uni-forms-item label="发票抬头" name="subject" required>
								<uni-data-checkbox
									@change="changeSubject"
									mode="tag"
									v-model="form.subject"
									:localdata="invoiceSubjectList"
									selectedColor="#e3230e"></uni-data-checkbox>
							</uni-forms-item>
						</view>
						<view v-if="form.invoice === 1 && form.subject === 1">
							<uni-forms-item label="单位名称" name="company" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.company"
									placeholder="请输入单位名称" />
							</uni-forms-item>
							<uni-forms-item label="公司地址" name="companyAddr" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.companyAddr"
									placeholder="请输入公司地址" />
							</uni-forms-item>
							<uni-forms-item label="公司电话" name="companyPhone" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.companyPhone"
									placeholder="请输入公司电话" />
							</uni-forms-item>
							<uni-forms-item label="纳税人识别码" name="companyCode" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.companyCode"
									placeholder="请输入纳税人识别码" />
							</uni-forms-item>
							<uni-forms-item label="银行账号" name="companyAccount" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.companyAccount"
									placeholder="请输入银行账号" />
							</uni-forms-item>
							<uni-forms-item label="开户行地址" name="accountAddr" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.accountAddr"
									placeholder="请输入开户行地址" />
							</uni-forms-item>
							<uni-forms-item label="联系邮箱" name="email" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.email"
									placeholder="请输入联系邮箱" />
							</uni-forms-item>
						</view>
						<view v-else-if="form.invoice === 1 && form.subject === 0">
							<uni-forms-item label="个人名称" name="company" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.company"
									placeholder="请输入个人名称" />
							</uni-forms-item>
							<uni-forms-item label="联系邮箱" name="email" required>
								<uni-easyinput
									type="text"
									:inputBorder="false"
									primaryColor="#e3230e"
									v-model="form.email"
									placeholder="请输入联系邮箱" />
							</uni-forms-item>
						</view>
					</uni-forms>
						
				</scroll-view>
			</view>
			<view class="invoice-popup-btns main-flex">
				<button class="ty-button ty-button-cancel invoice-popup-btns-item" @click="cancel">取消</button>
				<button class="ty-button ty-button-confirm invoice-popup-btns-item" @click="confirm">确认</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
  /**
   * OrderInvoice 发票弹窗
   * @description 发票弹窗
   * @property {Boolean} showInvoice 弹窗打开关闭
   * @event {Function} close 关闭弹窗
	 * @event {Function} change 填写内容
   */
	import { computed, onMounted, ref, watch, nextTick } from "vue"
	import useUserStore from "@/store/modules/user"
	import modal from '@/plugins/modal'
	import { invoiceList, invoiceTypeList, invoiceSubjectList } from '@/utils/config.js'
	
	const userStore = useUserStore()
	const props = defineProps({
		showInvoice: {
			type: Boolean,
			default: false 
		},
		modelValue: {
			type: Object,
			default: {}
		}
	})
	const emits = defineEmits(['close', 'change', 'update:modelValue'])
	
	const closeInvoice = () => {
		emits('close')
	}
	
	
	// 表单
	const formRef = ref(null)
	const form = ref({
		invoice: 0,
		type: '',
		subject: '',
		accountAddr: '',
		company: '',
		companyAccount: '',
		companyAddr: '',
		companyCode: '',
		companyPhone: '',
		email: ''
	})
	
	const rules1 = {
		invoice: {
			rules: [{
				required: true,
				errorMessage: '请选择发票内容'
			}]
		}
	}
	const rules2 = {
		invoice: {
			rules: [{
				required: true,
				errorMessage: '请选择发票内容'
			}]
		},
		type: {
			rules: [{
				required: true,
				errorMessage: '请选择发票类型'
			}]
		},
		subject: {
			rules: [{
				required: true,
				errorMessage: '请选择发票抬头'
			}]
		},
		company: {
			rules: [{
				required: true,
				errorMessage: '请输入个人名称'
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '请输入联系邮箱'
			}]
		}
	}
	const rules3 = {
		invoice: {
			rules: [{
				required: true,
				errorMessage: '请选择发票内容'
			}]
		},
		type: {
			rules: [{
				required: true,
				errorMessage: '请选择发票类型'
			}]
		},
		subject: {
			rules: [{
				required: true,
				errorMessage: '请选择发票抬头'
			}]
		},
		company: {
			rules: [{
				required: true,
				errorMessage: '请输入公司名称'
			}]
		},
		companyAddr: {
			rules: [{
				required: true,
				errorMessage: '请输入公司地址'
			}]
		},
		companyPhone: {
			rules: [{
				required: true,
				errorMessage: '请输入公司电话'
			}]
		},
		companyCode: {
			rules: [{
				required: true,
				errorMessage: '请输入纳税人识别码'
			}]
		},
		companyAccount: {
			rules: [{
				required: true,
				errorMessage: '请输入银行账号'
			}]
		},
		accountAddr: {
			rules: [{
				required: true,
				errorMessage: '请输入开户行地址'
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '请输入联系邮箱'
			}]
		}
	}
	
	// 表单验证
	const rules = ref({})
	
	// 选择发票内容
	const changeInvoice = (e) => {
		form.value.type = ''
		form.value.subject = ''
		form.value.accountAddr = ''
		form.value.company = ''
		form.value.companyAccount = ''
		form.value.companyAddr = ''
		form.value.companyCode = ''
		form.value.companyPhone = ''
		form.value.email = ''
		if (e.detail.value === 1) {
			form.value.type = 0
			form.value.subject = 0
			rules.value = rules2
		} else {
			rules.value = rules1
		}
		nextTick(() => {
			formRef.value.setRules(rules.value)
		})
	}
	// 选择发票体
	const changeSubject = (e) => {
		form.value.accountAddr = ''
		form.value.company = ''
		form.value.companyAccount = ''
		form.value.companyAddr = ''
		form.value.companyCode = ''
		form.value.companyPhone = ''
		form.value.email = ''
		if (e.detail.value === 1) {
			rules.value = rules3
		} else {
			rules.value = rules2
		}
		nextTick(() => {
			formRef.value.setRules(rules.value)
		})
	}
	
	
	
	// 表单提交
	const confirm = () => {
		formRef.value.validate().then(formRes => {
			emits('change', form.value)
			emits('update:modelValue', form.value)
			emits('close')
		})
	}
	
	// 取消
	const cancel = () => {
		emits('close')
		form.value = {
			invoice: 0,
			type: '',
			subject: '',
			accountAddr: '',
			company: '',
			companyAccount: '',
			companyAddr: '',
			companyCode: '',
			companyPhone: '',
			email: ''
		}
		rules.value = rules1
		nextTick(() => {
			formRef.value.setRules(rules.value)
		})
	}
	watch(() => props.modelValue, (nval, oval) => {
		if (nval) {
			form.value = nval
		}
	})
</script>

<style lang="scss" scoped>
  .invoice-popup {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #ffffff;
		padding: 0 15px;
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
		}
		&-content {
			
		}
		&-form {
			max-height: 800rpx;
			min-height: 400rpx;
		}
		&-btns {
			justify-content: center;
			padding: 40rpx 0;
			&-item {
				width: 260rpx;
				padding: 10rpx;
				margin: 0;
				justify-content: center;
				margin: 0 40rpx;
			}
		}
	}
</style>
